<template>
  <div>
    <button @click="show" v-if="showBtn">点我显示文本框</button>
    <input ref="inp" v-else type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBtn: true
    }
  },
  methods: {
    show() {
      this.showBtn = false
      // 需求: 文本框显示时, 自动获取到焦点
      // this.$refs.inp 为什么是 undefined?
      // DOM 更新是异步的
      // 解决方案: $nextTick
      this.$nextTick(() => {
        this.$refs.inp.focus()
      })
    }
  }
}
</script>
